<template>
  <!-- 内容 -->
  <div class="main">
    <div class="container">
      <div class="row">
        <div class="col-8">
          <h6><b class="square"></b> 来自 <i class="text-success">{{ targetUser.username }}</i> 的私信</h6>
        </div>
        <div class="col-4 text-right">
          <button type="button" class="btn btn-secondary btn-sm" @click="back">返回</button>
          <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#sendModal">给TA私信</button>
        </div>
      </div>
      <!-- 弹出框 -->
      <div class="modal fade" id="sendModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">发私信</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="col-form-label">发给：</label>
                  <input type="text" class="form-control" id="recipient-name" :value="targetUser.username" disabled>
                </div>
                <div class="form-group">
                  <label for="message-text" class="col-form-label">内容：</label>
                  <textarea class="form-control" id="message-text" rows="10" v-model="content" />
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="resetInput">取消</button>
              <button type="button" class="btn btn-primary" id="sendBtn" @click="sendLetter">发送</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 提示框 -->
      <div class="modal fade" id="hintModal" tabindex="-1" role="dialog" aria-labelledby="hintModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="hintModalLabel">提示</h5>
            </div>
            <div class="modal-body" id="hintBody">
              发送完毕!
            </div>
          </div>
        </div>
      </div>

      <!-- 私信列表 -->
      <ul class="list-unstyled mt-4">
        <li class="media pb-3 pt-3 mb-2" v-for="letterDetailVo in letterDetail" :key="letterDetailVo.letter.id">
          <router-link :to="'/profile/' + letterDetailVo.fromUser.id">
            <img :src="letterDetailVo.fromUser.headerUrl" class="mr-4 rounded-circle user-header" alt="用户头像" >
          </router-link>
          <div class="toast show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
              <strong class="mr-auto">{{ letterDetailVo.fromUser.username }}</strong>
              <small>{{ letterDetailVo.letter.createTime }}</small>
              <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="toast-body" :style="{color: letterDetailVo.letter.status == 0 ? 'red' : 'black'}">
              {{ letterDetailVo.letter.content }}
            </div>
          </div>
        </li>
      </ul>
      <!-- 分页 -->
      <div class="mt-5" v-if="pageSize > 0">
          <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import Letter from '@/api/letter'
import { useUserStore } from '@/store/modules/user'
import router from '@/router'

const route = useRoute()

const conversationId = ref('')

const letterDetail = ref([])

const targetUser = ref({})

const userStore = useUserStore()

const content = ref('')

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const totalPage = ref(100)
const pageSizes = ref([5, 10, 20, 25])
const currentPage = ref(1)
const pageSize = ref(5)

onMounted(async () => {
  conversationId.value = route.params.id
  getLetterCount()
  getLetterDetail()
})

const back = async () => {
  router.push('/letter')
}

const getLetterCount = async () => {
  Letter.getLetterCount(conversationId.value).then(res => {
    totalPage.value = res
  })
}

const getLetterDetail = async () => {
  Letter.getLetterDetail(conversationId.value, currentPage.value, pageSize.value).then((res) => {
    letterDetail.value = res
    let userId = userStore.id
    for (let i in res) {
      if (res[i].fromUser.id != userId) {
        targetUser.value = res[i].fromUser
        break
      }
    }
  })
}

const handleSizeChange = async () => {
  getLetterDetail()
}

const handleCurrentChange = async () => {
  getLetterDetail()
}

const sendLetter = async () => {
  await Letter.sendLetter(targetUser.value.username, content.value)
  // 重置输入框
  resetInput()
  // 发送提示
  $("#sendModal").modal("hide")
  $("#hintModal").modal("show")
  setTimeout(async () => {
    // 刷新页面
    getLetterCount()
    getLetterDetail()
    $("#hintModal").modal("hide")
  }, 1000)
}

const resetInput = async () => {
  content.value = ''
}

</script>

<style scoped>
  @import '@/style/letter.css'
</style>
